<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/dashboard.css">
    <link rel="stylesheet" href="/css/font-awesome.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <title>Dockercraft</title>
</head>
<body>
<form class="form-horizontal">
  <div class="form-group">
    <label for="serverKit" class="col-sm-2 control-label">服务端</label>
    <div id="serverKit" class="col-sm-3">
      <select class="form-control">
          #foreach ($i in $servers)
              <option value="${i.path}">
                  ${i.LocalName}
              </option>
          #end
      </select>
    </div>
  </div>
  <div id="extend">

  </div>
</form>

<script src="/js/md5.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.tmpl.min.js"></script>
<script src="/js/jquery.tmplPlus.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
var servers=${serversJson};
var options=${options};
$(document).ready(function(){
    servers.forEach(function(r,i){
        servers[i].md5=hex_md5(r.path);
        if(servers[i].md5==options.id){
            $("option[value='"+r.path+"']").attr("selected","selected");
            buildForm(servers[i]);
        }
    });
    $("select").on("change",function(){
        servers.forEach(function(r,i){
            if(servers[i].path==$("select option:selected").val()){
                buildForm(servers[i]);
            }
        });
    });
});


var buildForm=function(server){
    console.log(jQuery.tmpl($("#tpl_extend").val(),{params:server["LocalParamName"]}));
    $("#extend").html(jQuery.tmpl($("#tpl_extend").html(),{params:server["LocalParamName"]}));
};
</script>
<script id="tpl_extend" type="text">
{{each(i,n) params}}
<div class="form-group">
    <label class="col-sm-2 control-label">${n}</label>
    <div class="col-sm-3">
      <textarea type="text" class="form-control" name="params[]" />
    </div>
  </div>
{{/each}}
</script>
</body>
</html>